<template>
  <div>
    <div class="groggery">
      <el-card class="box-card">
        <div class="clearfix">
          <div class="container">
            <el-form size="small" label-width="100px">
              <el-form-item label="酒店名称：" class="width100">
                <el-input
                  v-model="ggNo"
                  placeholder="请输入酒店名称"
                  class="selWidth"
                  size="small"
                  clearable
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    size="small"
                    @click="seachList"
                  />
                </el-input>
              </el-form-item>
            </el-form>
            <div style="margin-left:16px">
              <el-button
                class="mr10"
                size="small"
                type="primary"
                @click="addgInfo()"
                >添加酒店</el-button
              >
            </div>
          </div>
        </div>
      </el-card>
      <div class="mt20">
        <!-- <cards-data :cardLists="cardLists" v-if="checkPermi(['admin:order:list:data'])"></cards-data> -->
      </div>
      <!-- bod -->
      <el-table :data="tableData">
        <el-table-column
          fixed
          prop="jdName"
          label="酒店名称"
          align="center"
          width="200"
        >
        </el-table-column>
        <el-table-column prop="jdPhone" label="酒店电话" align="center">
        </el-table-column>
        <el-table-column prop="jdAddress" label="酒店地址" align="center">
        </el-table-column>
        <el-table-column
          prop="jdDescribe"
          width="200"
          label="酒店描述"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              class="mr10"
              @click="details(scope.row.id)"
              >详情</el-button
            >
            <el-button
              type="text"
              size="small"
              class="mr10"
              @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              class="mr10"
              @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="loadData"
          :current-page.sync="pagesize.page"
          :page-sizes="[20, 40, 60, 80]"
          :page-size="pagesize.limit"
          layout="total,sizes,prev, pager, next,jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 酒店详情 -->
    <el-dialog title="酒店详情" :visible.sync="dialogVisible">
      <el-row>
        <el-col :span="12" style="margin:40px 0">
          <span class="title">酒店名称</span>: {{ grogdList.jdName }}
        </el-col>
        <el-col :span="12" style="margin:40px 0"
          ><span class="title">酒店地址</span>:{{ grogdList.jdAddress }}</el-col
        >
        <el-col :span="12" style="margin:40px 0"
          ><span class="title">酒店电话</span>: {{ grogdList.jdPhone }}</el-col
        >
        <el-col :span="12" style="margin:40px 0"
          ><span class="title">自动回拨时间</span>:
          <span v-if="grogdList.isCallTime == '0'">否</span>
          <span v-if="grogdList.isCallTime == '1'">全天</span>
          <span v-if="grogdList.isCallTime == '3'">晚上</span>
          <span v-if="grogdList.isCallTime == '2'">白天</span>
          <span v-if="grogdList.isCallTime == '4'"
            >{{ grogdList.callTimeStart }} 至 {{ grogdList.callTimeEnd }}</span
          >
        </el-col>
        <el-col>
          <div style="display:flex">
            <span class="title">宣传图片</span>:
            <template v-if="grogdList.jdImg != null">
              <div
                v-for="(item, index) in grogdList.jdImg"
                :key="index"
                style="width:50px; height:50px; margin-right:15px"
              >
                <img :src="item" alt="" style="width:100%; height:100%" />
              </div>
            </template>
            <template v-else>
              <div style="margin-right:15px">
                <span>暂无图片</span>
              </div>
            </template>
          </div>
        </el-col>
        <el-col :span="12" style="margin:40px 0"
          ><span class="title">酒店描述</span>:
          {{ grogdList.jdDescribe }}</el-col
        >
      </el-row>
    </el-dialog>
    <!-- 修改 -->
    <groggery-edit
      ref="ggedit"
      :ggData="grogdList"
      v-on:eiduser="eiduser"
    ></groggery-edit>
    <!-- 新增 -->
    <groggery-add ref="ggadd"></groggery-add>
  </div>
</template>

<script>
import {
  groggeryListApi,
  groggerymessageApi,
  deltgroggeryApi
} from "@/api/groggery";
import groggeryEdit from "./groggeryEdit.vue";
import groggeryAdd from "./groggeryAdd.vue";
export default {
  name: "grogGeryl",
  components: {
    groggeryEdit,
    groggeryAdd
  },
  data() {
    return {
      tableData: [],
      // 酒店详情
      grogdList: [],
      pagesize: {
        // 每页数量
        limit: 20,
        // 页码
        page: 1
      },
      // 总数据量
      total: 0,
      // 总页数
      totalPage: 0,
      // 详情
      dialogVisible: false,
      //searchimput
      ggNo: "",
      uid: ""
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    // 详情
    async details(id) {
      this.dialogVisible = true;
      //获取酒店信息
      const resgg = await groggerymessageApi({ id: id });
      this.grogdList = resgg;
    },
    // 修改
    async edit(row) {
      this.$refs.ggedit.dialogVisible = true;
      const resgg = await groggerymessageApi({ id: row.id });
      this.grogdList = resgg;
    },
    // 删除
    async del(id) {
      try {
        await this.$confirm("是否删除该酒店", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        });
        await deltgroggeryApi({ id: id });
        this.$message.success("删除成功");
        this.loadData();
      } catch {}
    },
    // 获取酒店列表
    async loadData() {
      const res = await groggeryListApi(this.pagesize);
      this.total = res.total;
      this.totalPage = res.totalPage;
      this.tableData = res.list;
    },
    // 搜索
    async seachList() {
      this.pagesize.page = 1;
      //获取酒店信息
      const resggg = await groggeryListApi({ jdName: this.ggNo });
      this.tableData = resggg.list;
      this.total = this.tableData.length;
    },
    pageChange(page) {
      this.pagesize.page = page;
      this.getList();
    },
    handleSizeChange(val) {
      this.pagesize.limit = val;
      this.loadData();
    },
    // 添加酒店信息
    addgInfo() {
      this.$refs.ggadd.dialogVisible = true;
    },
    //子传
    eiduser(uid) {
      console.log(uid,'uid');
      this.uid = uid;
    }
  }
};
</script>

<style lang="scss" scoped>
.groggery {
  padding: 20px;
  .block {
    padding: 20px;
    text-align: right;
    width: 100%;
    background-color: #ffffff;
  }
}
.Publicityimg {
  img {
    width: 50px;
    height: 50px;
  }
}
</style>
